link : Referensi

<aside> 💡 tambahkan di blade

</aside>

 @if ($rcvhdr->status == 'confirm')
                    <button class="btn btn-success text-white" style="float: right;" wire:click="cetakUlangRcvdtl()">
                        <span wire:loading>
                            <span class="spinner-border spinner-border-sm"></span> Loading...</span>
                        <span wire:loading.remove>
                            <i class="fa-solid fa-print me-2 "></i>
                            Cetak Invoice
                        </span>
                    </button>
                @endif

• Tombol Cetak:
  • Jika status dari $rcvhdr adalah 'confirm', tombol cetak akan ditampilkan.
  • Ketika tombol diklik, metode cetakUlangRcvdtl di komponen Livewire akan dipanggil.
• Loading Indicator:
  • Saat proses pemanggilan metode cetakUlangRcvdtl berlangsung, konten di dalam <span wire:loading> akan muncul, menunjukkan spinner dan teks "Loading...".
  • Setelah proses selesai, konten di dalam <span wire:loading.remove> akan kembali muncul, menunjukkan ikon cetak dan teks "Cetak Invoice".

<aside> 💡 tambahkan di component

</aside>

  public function cetakUlangRcvdtl()
  {
    $tempId = $this->idPage;
    // dd($tempId); coba dulu apakah dari blade fungsi ini kepanggil apa tidak
    $this->dispatch('cetakUlangRcvdtl', $tempId);
  }

1. Mengambil Data untuk Aksi:
   • Fungsi ini mengambil ID yang diperlukan (idPage) dan mempersiapkannya untuk digunakan dalam aksi cetak ulang.
2. Mengirimkan Event ke Frontend:
   • Dengan menggunakan dispatch, fungsi ini memberitahu bagian frontend (JavaScript) bahwa ada event cetakUlangRcvdtl yang harus ditangani.
   • Data ($tempId) dikirimkan bersama event ini untuk digunakan oleh frontend dalam proses cetak.

<aside> 💡 tambahkan di blade (bagian javascript)

</aside>

    // JS Untuk membuka tab baru dan mencetak Nota
    function popupCenter(url, title, w, h) {
        // Menghitung posisi tengah layar untuk jendela popup
        const dualScreenLeft = window.screenLeft || window.screenX || 0;
        const dualScreenTop = window.screenTop || window.screenY || 0;

        const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
        const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

        const systemZoom = width / window.screen.availWidth;
        const left = ((width - w) / 2 / systemZoom) + dualScreenLeft;
        const top = ((height - h) / 2 / systemZoom) + dualScreenTop;

        // Membuka jendela popup
        const newWindow = window.open(url, title, `
        scrollbars=yes,
        width=${w / systemZoom},
        height=${h / systemZoom},
        top=${top},
        left=${left}
    `);

        // Fokus pada jendela popup
        if (newWindow && newWindow.focus) {
            newWindow.focus();
        }
    }

    let cetakUlangRcvdtlUrl =
        "{{ route('rcvdtl.cetakUlangRcvdtl', ['id' => ':id']) }}";

    // Menangkap URL untuk mencetak semua karyawan

    window.addEventListener('cetakUlangRcvdtl', event => {
        let id = event.detail[0];
        let url = cetakUlangRcvdtlUrl.replace(':id', id);
        popupCenter(url, 'rcvdtl', 580, 500);
    });

1. Komponen Livewire Memanggil Event:
   • Ketika pengguna mengklik tombol untuk mencetak ulang detail penerimaan, metode cetakUlangRcvdtl dipanggil di komponen Livewire.
   • Komponen Livewire mengirim event cetakUlangRcvdtl ke JavaScript dengan ID yang diperlukan.
2. JavaScript Mendengarkan Event:
   • JavaScript mendengarkan event cetakUlangRcvdtl dan menangkap ID dari detail event.
3. Membuka Jendela Pop-up:
   • URL untuk halaman cetak dibangun dengan menggantikan :id dengan ID yang benar.
   • Fungsi popupCenter dipanggil untuk membuka jendela pop-up yang berpusat di layar dan menampilkan halaman cetak.
4. Jendela Pop-up Ditampilkan:
   • Jendela pop-up dibuka di tengah layar dengan ukuran yang ditentukan dan menampilkan halaman cetak nota.

Dengan cara ini, pengguna dapat mencetak nota dalam jendela pop-up baru tanpa meninggalkan halaman saat ini, memberikan pengalaman pengguna yang mulus dan interaktif.

<aside> 💡 tambahkan di web →buat routebaru

</aside>

  Route::get('rcvdtl/cetakUlangRcvdtl/{id}', [RcvdtlComponent::class, 'printUlangRcvdtl'])->name('rcvdtl.cetakUlangRcvdtl');

1. Pengguna Mengakses URL:
   • Pengguna mengakses URL rcvdtl/cetakUlangRcvdtl/{id} di browser.
2. Route Memanggil Controller dan Metode:
   • Laravel mencocokkan URL ini dengan route yang telah didefinisikan, dan memanggil metode printUlangRcvdtl di controller RcvdtlComponent dengan parameter ID.
3. Controller Menangani Permintaan:
   • Metode printUlangRcvdtl di controller menangani permintaan, melakukan logika yang diperlukan (seperti mengambil data dari database), dan mengembalikan tampilan atau respon yang sesuai.

<aside> 💡 tambahkan di compnent →buat fungsi baru

</aside>

 public function printUlangRcvdtl($id)
  {

    $rcvdtl = Rcvdtl::with('rcvhdr')->where('rcvhdr_idrcvhdr', $id)->get();
    $rcvhdr = Rcvhdr::find($id);

    $sumJumlahBayar = $rcvdtl->sum(function ($item) {
      return $item->rcvprice * $item->qtyrcv;
    });

    return view('layout.rcvdtlnota_pdf', compact('rcvdtl', 'rcvhdr', 'sumJumlahBayar'));
  }

1. Pengguna Mengakses Route:
   • Pengguna mengakses URL yang memicu route yang terhubung dengan metode printUlangRcvdtl.
2. Controller Mengambil Data:
   • Fungsi printUlangRcvdtl di dalam controller dipanggil dengan ID yang diberikan.
   • Data Rcvdtl dan Rcvhdr diambil dari database berdasarkan ID tersebut.
3. Menghitung Total:
   • Total jumlah bayar dihitung dengan mengalikan harga dengan kuantitas untuk setiap item dalam detail penerimaan.
4. Mengembalikan Tampilan:
   • Fungsi mengembalikan tampilan yang berisi data detail penerimaan, header penerimaan, dan total jumlah bayar.
   • Tampilan ini bisa berupa halaman HTML yang dirancang untuk dicetak atau diekspor ke PDF.

<aside> 💡 buat blade baru di folder layout dengan nama rcvdtlnota_pdf.blade.php

</aside>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Invoice_{{$rcvhdr->idrcvhdr}}</title>
    <style>
        @page {
            size: 10cm 20cm;
            flex-shrink:
                margin: 1cm;
        }

        td.polos {
            font-size: 12pt;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            font-size: 10pt;
            background-color: #FFFFFF;
            /* Tambahkan garis hitam dengan ketebalan 1px */
            padding: 8px;
            /* Tambahkan ruang padding untuk sel */
            text-align: left;
            /* Atur perataan teks */
        }

        .border {
            border: 1px solid black;
        }

        .text-align-center {
            text-align: center;
        }

        .text-align-right {
            text-align: right;
        }
    </style>
</head>

<body onload="window.print()">
    {{-- <button class="btn-print" style="position: absolute; right: 1rem; top: rem;" onclick="window.print()">Print</button> --}}
    <table class="polos">
        {{-- <tr>
            <td class="polos" style="font-size:8px;">
                <img src="data:image/png;base64,{{ base64_encode(file_get_contents(public_path('/img/logo.png'))) }}"
                    style="height:50px;">
            </td>
        </tr> --}}
    </table>
    <table class="polos text-align-center" style="width: 80mm; table-layout:fixed;">
        <tr>
            <td class="polos text-align-center" colspan="4"><b>SISKO</b></td>
        <tr>
    </table>
    <table class="polos" style="width: 80mm; table-layout:fixed;">
        <tr>
            <td class="polos text-align-center" colspan="4">-------------------------------------------------------
            </td>
        </tr>
        <tr>
            <td class="polos text-align-center" colspan="4"><b>Invoice Pembelian</b></td>
        <tr>
        <tr>
            <td class="polos text-align-center" colspan="4"><b>{{ $rcvhdr->idrcvhdr }} /
                    {{ $rcvhdr->tglrcv  }}</b></td>
        <tr>
        <tr>
            <td class="polos text-align-center" colspan="4">-------------------------------------------------------
            </td>
        </tr>
    </table>
    <table style="width: 80mm; table-layout:fixed;">
        <tr>
            <td width="10%" class="polos" style="font-size:11px">No</td>
            <td width="40%" class="polos text-align-right" style="font-size:11px">Produk</td>
            <td width="40%" class="polos text-align-right" style="font-size:11px">Harga</td>
            <td width="25%" class="polos text-align-right" style="font-size:11px">Jumlah</td>
            <td width="25%" class="polos text-align-right" style="font-size:11px">Total</td>
        </tr>
        @php
            $no = 1; // Inisialisasi nomor awal
        @endphp
        @foreach ($rcvdtl as $datas)
            <tr>
                <td style="font-size:11px" class="polos">{{ $no }}</td>
                <td style="font-size:11px" class="polos">{{ $datas->product->product }}</td>
                <td style="font-size:11px" class="polos text-align-right">{{ number_format($datas->rcvprice , 0, ',', '.') }}</td>
                <td style="font-size:11px" class="polos text-align-right">{{ number_format($datas->qtyrcv , 0, ',', '.') }}</td>
                <td style="font-size:11px" class="polos text-align-right">{{ number_format($datas->rcvprice  * $datas->qtyrcv , 0, ',', '.') }}</td>
            </tr>

            @php
                $no++; // Inisialisasi nomor awal
            @endphp
        @endforeach
        <tfoot>
            <tr>
                <td class="polos text-align-center" colspan="5">
                    -------------------------------------------------------
                </td>
            </tr>
            <tr>
                <th style="font-size:11px" class="polos"></th>
                <th style="font-size:11px" class="polos"></th>
                <th style="font-size:11px" class="polos"></th>
                <th style="font-size:11px" class="polos text-align-right">Total</th>
                <th style="font-size:11px" class="polos text-align-right">
                    {{ number_format($sumJumlahBayar , 0, ',', '.')}}</th>
            </tr>
        </tfoot>

    </table> <br>
</body>

</html>

Dokumen HTML ini berfungsi untuk menampilkan invoice pembelian dalam format yang siap untuk dicetak. Ini mencakup header, detail produk, dan total harga, dengan desain sederhana yang diatur oleh CSS untuk memastikan format yang konsisten saat dicetak. Fungsi printUlangRcvdtl di dalam controller mengambil data yang diperlukan dari database dan mengembalikan tampilan ini dengan data yang sesuai.